<template>
    <div>
        <div class="box1">
            <h2>当前求和为：{{sum}}</h2>
            <h4>组件简介：{{description}}</h4>
        </div>
        <div class="box2">
            <h4>当前求和放大10倍后：{{bigSum}}</h4>
            <h4>简短的简介：{{smallDescription}}</h4>
        </div>
        <br>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementIfOdd(n)">当前求和为奇数再+</button>
        <button @click="incrementWait(n)">等一等再+</button>
        <button @click="incrementServer">按接口字数加</button>
    </div>
</template>

<script>
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex';

    export default {
        name: 'Count',
        data() {
            return {
                n: 1
            }
        },
        methods: {
            ...mapMutations({
                increment: 'INCREMENT',
                decrement: 'DECREMENT'
            }),
            incrementServer() {
                this.$store.dispatch('incrementServer');
            },
            ...mapActions({
                incrementIfOdd: 'incrementIfOdd',
                incrementWait: 'incrementWait'
            })
        },
        computed: {
            ...mapState(['sum', 'description']),
            // ...mapGetters({
            //     bigSum: 'bigSum',
            //     smallDescription: 'smallDescription'
            // })
            ...mapGetters(['bigSum', 'smallDescription'])
        }
    }
</script>

<style>
    * {
        margin-left: 10px;
    }

    .box {
        background-color: pink;
        padding: 20px;
    }

    .box1 {
        background-color: skyblue;
        padding: 20px;
        margin-bottom: 10px;
    }

    .box2 {
        background-color: orange;
        padding: 20px;
    }
</style>